<template>
  <SysDialog draggable :title="dialog.title" :visible="dialog.visible" :width="dialog.width" :height="dialog.height"
    @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
      <!-- 内容组件 -->
      <el-form :model="dialogModel" ref="addTaskForm" label-width="120px" size="default" label-position="top">
        <div v-for="(select, index) in dialogModel.auditorUsers" :key="index" class="select_btn">
          <el-form-item :label="taskRoleList.dictItemVO[index].name">
            <el-select filterable v-model="dialogModel.auditorUsers[index].userIds" multiple placeholder="请输入或选择审核人"
              :popper-append-to-body="false">
              <el-option v-for="option in userList" :key="option.id" :label="option.name" :value="option.id" />
            </el-select>
          </el-form-item>
        </div>

        <!-- <el-form-item label="人员配置">
          <div class="TaskReviewInfo">
            <div v-for="(select, index) in dialogModel.auditorUsers" :key="index" class="select_btn">
              <el-select filterable v-model="dialogModel.auditorUsers[index].taskRole" placeholder="请选择审核角色"
                :popper-append-to-body="false" disabled>
                <el-option v-for="option in taskRoleList.dictItemVO" :key="option.id" :label="option.name"
                  :value="option.id" />
              </el-select>
              <el-select filterable v-model="dialogModel.auditorUsers[index].userIds" multiple placeholder="请输入或选择审核人"
                :popper-append-to-body="false">
                <el-option v-for="option in userList" :key="option.id" :label="option.name" :value="option.id" />
              </el-select>
            </div>
          </div>
        </el-form-item> -->
      </el-form>
    </template>
  </SysDialog>
</template>

<script setup lang='ts'>
import { ref, reactive } from "vue";
import SysDialog from "@/components/SysDialog.vue";
import { ElForm } from "element-plus";
import useDialog from "@/hooks/useDialog";
import useInstance from "@/hooks/useInstance";
import { EditType, Title } from "@/type/BaseEnum";
// import BaseLineModel from "@/composables/02Review/01ProjectMan/BaseLineModel";
// import Person from "@/composables/02Review/01ProjectMan/PersonSet";
const addTaskForm = ref<InstanceType<typeof ElForm>>();
const dialogModel = reactive({
  auditorUsers: [
    {
      taskId: '',
      taskRole: '',
      userIds: [] as Array<string>
    },
    {
      taskId: '',
      taskRole: '',
      userIds: [] as Array<string>
    },
    {
      taskId: '',
      taskRole: '',
      userIds: [] as Array<string>
    },
  ]
})
// const { dialogModel } = Person();
const emit = defineEmits(["saveUpData"]);
// 使用
const { dialog, onShow } = useDialog();
const { global, proxy } = useInstance();
// 父级数据
const props = defineProps({
  taskRoleList: {
    type: Object,
    default: () => { },
  },
  userList: {
    type: Object,
    default: () => { },
  },
});
const confirm = () => {
  // js 操作 
  dialogModel.auditorUsers.map((item,index)=>{
    dialogModel.auditorUsers[index].taskRole = props.taskRoleList.dictItemVO[index].id
  })
  console.log(dialogModel.auditorUsers,'dialogModel.auditorUsers');
  
  emit("saveUpData", dialogModel.auditorUsers);
  onClose();
};
const onClose = () => {
  dialog.visible = false;
  // dialogModel 把数据直接复原 直接调接口 获取三个角色
  dialogModel.auditorUsers = [
    {
      taskId: "",
      taskRole: "",
      userIds: [],
    },
    {
      taskId: "",
      taskRole: "",
      userIds: [],
    },
    {
      taskId: "",
      taskRole: "",
      userIds: [],
    },
  ];
};
const show = (type: string, row?: any) => {
  // console.log("show");
  dialog.width = 750;
  dialog.height = 400;
  dialog.title = '人员配置'
  onShow();
  // global.$resetForm(dialogModel)
  dialogModel.auditorUsers = dialogModel.auditorUsers.map((item, index) => {
    return {
      taskId: row.id,
      taskRole: props.taskRoleList.dictItemVO[index].id,
      userIds: [],
    };
  });
  if (type === EditType.EDIT) {
    global.$objCopy(row, dialogModel);
  }
  // 第一步获取角色的列表 roleId  第二步就是通过角色 获取用户的列表 --》list
  // global.$resetForm(addTaskForm.value, dialogModel);
};
defineExpose({
  show,
});
</script>
<style scoped lang='scss'>
.TaskReviewInfo {
  .select_btn {
    // margin: 0 10px 10px 10px;

    .el-select {
      margin-right: 8px;
      width: 100% !important;
    }
  }
}

.el-select {
  margin-right: 8px;
  width: 100% !important;
}
</style>